<script lang="ts">
import Vue from 'vue'
import NavBar from "@/components/nav-bar/nav-bar.vue";
import tips from "@/utils/tips";
import appConfig from "@/config/config";
import {updateStoreInfo} from "@/services/store/store";

export default Vue.extend({
  name: "update_info",
  components: {NavBar},
  data() {
    return {
      // 店铺信息
      storeInfo: {
        name: "",
        person_name: '',
        phone: "",
        address: "",
        longitude: null,
        latitude: null,
        logo: "",
      },

      // 查询
      rules: {
        'logo': {
          type: 'string', required: true, message: '请上传店铺照片',
        }, 'name': {
          type: 'string', required: true, message: '请填写店铺名',
        }, 'address': {
          type: 'string', max: 256, required: true, message: '请填写地址',
        }, 'longitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前经度',
        }, 'latitude': {
          type: 'number', required: true, message: '请点击icon获取店铺当前维度',
        }, 'person_name': {
          type: 'string', min: 3, max: 64, required: true, message: '请输入您的真是姓名',
        }, 'phone': {
          type: 'string', pattern: /^[1][3-9][0-9]{9}$/, min: 7, max: 11, required: true, message: '请输入电话号码',
          transform(value: string) {
            return String(value);
          },
        },
      },

      // 店铺照片
      storeImage: [],
    }
  },
  computed: {
    lang() {
      return this.$t('storePages.updateInfo')
    }
  },
  onLoad(query?: AnyObject) {
    console.log("update_info.vue -===- onLoad", JSON.parse(decodeURIComponent(query.store)))
    const {
      longitude, latitude, address, name, phone, person_name, logo, logo_url
    } = JSON.parse(decodeURIComponent(query.store))
    this.storeInfo = {longitude, latitude, address, name, phone, person_name, logo}
    this.storeImage = [{url: logo_url}]
    console.log("{this.storeInfo", this.storeInfo)
  },
  methods: {
    // 获取当前位置
    getStoreAddress() {
      uni.chooseLocation({
        success: (res) => {
          const {longitude, latitude} = res
          this.storeInfo = {...this.storeInfo, longitude, latitude}
        }
      })
    },

    // 上传和删除店铺照片
    uploadImage(fileData: any) {
      console.log(fileData)
      const {file} = fileData

      uni.uploadFile({
        url: appConfig.api + 'upload/file/store', // 仅为示例，非真实的接口地址
        filePath: file[0].url,
        file: file[0],
        fileType: 'image',
        formData: {is_black_white: "false"},
        name: 'file',
        success: (result) => {
          const res = JSON.parse(result.data)
          console.log(res)
          const {url, file_path} = res.data
          this.storeImage = [{url}]
          this.storeInfo.logo = file_path
        }, fail(err) {
          console.log(err)
        }
      });
    },
    // 删除照片
    deleteImage(event: any) {
      this.storeImage.splice(event.index, 1)
    },

    // 提交
    async printerInfoSubmit() {

      this.$refs.uForm.validate().then(async validationResult => {
        if (!validationResult) {
          tips.toast('缺少参数')
          return;
        }

        // 修改请求
        const updateStoreRes = await updateStoreInfo(this.storeInfo)
        const {code, data, msg} = updateStoreRes
        if (code === 200) {
          console.log('printerInfoSubmit', data)
          this.$store.dispatch('account')
          uni.navigateBack()
          tips.toast(msg)
        } else {
          tips.toast(msg);
        }
      }).catch(errors => {
        tips.toast('表单验证失败');
      });
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="[locale]">
      <u--form :model="storeInfo" labelPosition="left" ref="uForm" :rules="rules">
        <view class="card padding-40 margin-30 flex-column">
          <view class="margin-bottom-40 common-title">{{ lang.sections['fillInfo'] }}</view>

          <view class="common-icon-text">
            <u-form-item :label="lang.form.storeName['label']" prop="name" borderBottom :labelWidth="80">
              <u--input border="none" :placeholder="lang.form.storeName['placeholder']" v-model="storeInfo.name"/>
            </u-form-item>
          </view>

          <!-- 地址-->
          <u-form-item :label="lang.form.address['label']" :labelWidth="80" prop="address">
            <u-textarea
                v-model="storeInfo.address" :placeholder="lang.form.storeName['placeholder']"
                autoHeight border="bottom"/>
          </u-form-item>

          <view class="flex-between">
            <view class="column">
              <u-form-item :label="lang.form.location['longitude']" :labelWidth="80" prop="longitude">
                <u-input v-model="storeInfo.longitude" :placeholder="lang.form.location['placeholder']" border="none"
                         disabled disabledColor="#fff"/>
              </u-form-item>

              <u-form-item :label="lang.form.location['latitude']" :labelWidth="80" prop="longitude">
                <u--input v-model="storeInfo.latitude" :placeholder="lang.form.location['placeholder']" border="none"
                          disabled disabledColor="#fff"/>
              </u-form-item>
            </view>

            <view class="padding-20 bg-white" @click="getStoreAddress">
              <u-icon name="map-fill" size="22"
                      :color="storeInfo.longitude && storeInfo.latitude ? '#1073FF' : '#999999'"/>
            </view>
          </view>

          <!-- 老板名-->
          <u-form-item :label="lang.form.realName['label']" :labelWidth="80" prop="person_name">
            <u-input v-model="storeInfo.person_name" :placeholder="lang.form.realName['placeholder']" border="none"/>
          </u-form-item>

          <u-form-item :label="lang.form.phone['label']" :labelWidth="80" prop="phone">
            <u--input v-model="storeInfo.phone" :placeholder="lang.form.phone['placeholder']" type="number"
                      :maxlength="11" border="none"/>
          </u-form-item>
        </view>

        <view class="card padding-40 margin-30 flex-column">
          <view class="common-title">{{ lang.sections['uploadPhotos'] }}</view>

          <u-form-item :label="lang.upload['storePhoto']" prop="logo" :labelWidth="120">
            <u-upload
                :width="150" :height="150" accept="image" :maxCount="1" :fileList="storeImage" multiple
                @afterRead="uploadImage" @delete="deleteImage" :uploadText="lang.upload['uploadText']"/>
          </u-form-item>
        </view>
      </u--form>
      <view class="margin-30">
        <u-button type="primary" size="large" shape="circle" @click="printerInfoSubmit" :text="otherLang.submit"/>
      </view>
      <view style="height: 100rpx;"/>
    </view>
  </view>
</template>

<style scoped lang="scss">

</style>